<%--
  User: Eugenema
  Date: 2022/2/6 20:56
--%>
<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <title>登录</title>
    <link rel="shortcut icon" href="/resources/images/brand/emPersonLogo_black.png">
    <!-- 引入Element-UI样式文件 -->
    <link rel="stylesheet" href="/resources/element-ui/index.css">
    <!-- 引入VUE核心JS文件 -->
    <script src="/resources/js/vue.js"></script>
    <!-- 引入Element-UI核心JS文件 -->
    <script src="/resources/element-ui/index.js"></script>
    <script src="/resources/js/jquery.js"></script>
    <!-- 引入公共js -->
    <script src="/resources/js/public.js"></script>
    <!-- 引入公共css -->
    <link rel="stylesheet" href="/resources/css/public.css">
</head>
<style>
    /** 登录卡片 */
    .el-card__body {
        padding: 0px !important;
        border-radius: 30px;
    }


    /** 登录框，垂直水平居中 */
    .loginBox {
        width: 650px;
        height: 400px;
        margin: auto;
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
    }
</style>
<body>
    <div id="login-Element" class="fullWH" style="background-color: ghostwhite">
        <transition name="el-zoom-in-center">
            <!-- 登录框 -->
            <div class="loginBox" v-show="screenShow">
                <el-card class="fullWH el-card__body">
                    <!-- 图片信息 -->
                    <div style="float: left; background-color: #f8f8ff; width: 40%; height: 100%;">
                        <el-image class="fullWH"
                                  src="/resources/images/static/login-left.png"
                                  fit="contain">
                            <div slot="error" class="image-slot">
                                <i class="el-icon-picture-outline"></i>
                            </div>
                        </el-image>
                    </div>

                    <!-- 登录信息 -->
                    <transition name="el-zoom-in-center">
                        <div style="float: left; background-color: white; width: 60%; height: 100%"
                                v-show="loginPanelShow">
                            <!-- 标题栏 -->
                            <div style="float: left; margin-left: 10%" v-show="registerFlag">
                                <el-link @click="returnLogin('学习铃', '登录')" :underline="false" style="line-height: 500%">
                                    <i class="el-icon-arrow-left"></i>返回登录
                                </el-link>
                            </div>
                            <div style="width: 80%; height: 20%; margin: auto;">
                                <p style="font-family: Hiragino Sans GB; font-weight: bolder; font-size: 20px; margin-left: 35%">
                                    {{formTitle}}
                                </p>
                                <el-divider></el-divider>
                            </div>

                            <!-- 表单 -->
                            <el-form style="width: 80%; margin: auto;" label-width="auto" ref="loginForm" :model="loginData" :rules="loginRules">
                                <el-form-item prop="userName">
                                    <el-input placeholder="请输入用户名"
                                              v-model="loginData.userName"
                                              maxlength="20"
                                              show-word-limit></el-input>
                                </el-form-item>
                                <el-form-item prop="userPassword">
                                    <el-input placeholder="请输入密码" show-password v-model="loginData.userPassword"></el-input>
                                </el-form-item>
                                <el-form-item prop="affirmPassword" v-show="registerFlag">
                                    <el-input placeholder="请再次输入密码" show-password v-model="loginData.affirmPassword"></el-input>
                                </el-form-item>
                                <el-form-item prop="authCode">
                                    <el-input style="width: 180px" placeholder="请输入验证码" v-model="loginData.authCode" @keyup.enter.native="submitLogin"></el-input>
                                    <el-tooltip id="authCode" effect="dark" :content="authTip" placement="top-end">
                                        <el-image style="width: 120px; height: 40px; background-color: black; float: right;"
                                                  class="availableMouse"
                                                  :src="authUrl"
                                                  @click="getAuthCode()">
                                        </el-image>
                                    </el-tooltip>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary"
                                               id="submitButton"
                                               style="width: 90%; margin-left: 15px" @click="submitLogin">
                                        {{formButton}}
                                    </el-button>
                                </el-form-item>
                            </el-form>
                            <div style="width: 80%; margin: auto;" v-show="!registerFlag">
                                <el-link @click="forgetPwd()" target="_blank">忘记密码？</el-link>
                                <el-link @click="returnLogin('用户注册', '注册')" target="_blank" style="float: right">立即注册>></el-link>
                            </div>
                        </div>
                    </transition>
                </el-card>
            </div>
        </transition>
    </div>
</body>

<script>
    //校验密码二次输入
    let checkAffirmPWD = (rule, value, callback) => {
        //若是登录表单，则不校验
        if (login.registerFlag) {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== login.loginData.userPassword) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        } else {
            callback();
        }
    };

    let login = new Vue({
        el: "#login-Element",
        data: {
            //界面显示
            screenShow: false,
            //验证码提示信息
            authTip: "没看清？点击图片刷新验证码",
            //验证码间隔获取时间
            authGetTime: 30,
            //验证码请求url
            authUrl: "",
            //登录表单数据
            loginData: {
                userName: "",
                userPassword: "",
                authCode: "",
                affirmPassword: ""
            },
            //表单标题内容
            formTitle: '学习铃',
            //表单提交按钮
            formButton: '登录',
            //表单面板显示标志
            loginPanelShow: true,
            //注册表单显示标志
            registerFlag: false,
            //登录表单规则
            loginRules: {
                userName: [
                    {required: true, message: '用户名不能为空', trigger: 'blur'},
                    {max: 20, message: '用户名最多20个字符', trigger: 'blur'}
                ],
                userPassword: [
                    {required: true, message: '密码不能为空', trigger: 'blur'}
                ],
                authCode: [
                    {required: true, message: '验证码不能为空', trigger: 'blur'}
                ],
                affirmPassword: [
                    {validator: checkAffirmPWD, trigger: 'blur'}
                ]
            }
        },
        methods: {
            /** 忘记密码 */
            forgetPwd() {
                this.$message.info("该功能待开发！");
            },

            /** 表单提交 */
            submitLogin() {
                if (this.registerFlag) {
                    login.$refs['loginForm'].validate((valid) => {
                        if (valid) {
                            //按钮加载状态
                            login.loadButton();
                            ajaxPostPackage("/register", login.loginData,
                                function successCallback (returnData) {
                                    window.setTimeout(function () {
                                        //清除按钮加载状态
                                        login.noLoadButton();
                                        login.$message.success("恭喜，注册成功！");
                                        login.returnLogin("学习铃", "登录");
                                    }, 500);
                                },
                                function failCallback (returnData) {
                                    window.setTimeout(function () {
                                        //清除按钮加载状态
                                        login.noLoadButton();
                                        //重新获取验证码
                                        login.getAuthCode(true);
                                        login.$message.error(returnData.errorMsg);
                                    }, 500);
                                },
                                function errorCallback (error) {
                                    window.setTimeout(function () {
                                        //清除按钮加载状态
                                        login.noLoadButton();
                                        //重新获取验证码
                                        login.getAuthCode(true);
                                        login.$message.error("未知异常，请联系管理员！");
                                    }, 500);
                                }
                            );
                        }
                    })
                } else {
                    login.$refs['loginForm'].validate((valid) => {
                        if (valid) {
                            login.loadButton();
                            ajaxPostPackage("/login", login.loginData, 
                                function successCallback (returnData) {
                                    //清除按钮加载状态
                                    window.setTimeout("login.noLoadButton()", 500);
                                    window.setTimeout("window.location = '/'", 500);
                                },
                                function failCallback (returnData) {
                                    //清除按钮加载状态
                                    window.setTimeout("login.noLoadButton()", 500);
                                    //重新获取验证码
                                    login.getAuthCode(true);
                                    login.$message.error(returnData.errorMsg);
                                },
                                function errorCallback (error) {
                                    //清除按钮加载状态
                                    window.setTimeout("login.noLoadButton()", 500);
                                    //重新获取验证码
                                    login.getAuthCode(true);
                                    login.$message.error("未知异常，请联系管理员！");
                                }
                            );
                        }
                    })
                }
            },

            /**
             *  获取验证码
             *  来源：1、用户点击图片  2、程序调用
             *  若用户点击图片需要校验是否可点击，程序调用则校验flag
             * */
            getAuthCode(flag) {
                if($("#authCode").css("cursor") == "pointer" || flag) {
                    //清空输入框
                    login.loginData.authCode = "";
                    //获取验证码
                    this.authUrl = "/getAuthCode?random=" + Math.random();
                    //重置验证码间隔时间
                    this.authGetTime = 15;
                    //设置提示语
                    this.authTip = "15秒后可重新获取";
                    //设置图片禁用样式
                    $("#authCode").removeClass("availableMouse");
                    $("#authCode").addClass("unavailableMouse");

                    let interval = window.setInterval(function (){
                        if (login.authGetTime > 0) {
                            login.authGetTime = login.authGetTime - 1;
                            login.authTip = login.authGetTime + "秒后可重新获取";
                        } else {
                            //设置图片启用样式
                            $("#authCode").removeClass("unavailableMouse");
                            $("#authCode").addClass("availableMouse");
                            //设置提示语
                            login.authTip = "没看清？点击图片刷新验证码";
                            //删除计时器
                            window.clearInterval(interval);
                        }
                    }, 1000);
                }
            },

            /** 返回登录 / 注册 */
            returnLogin(title, button) {
                //隐藏面板
                this.loginPanelShow = false;
                //初始化内容
                let initFormRequest = "login.initForm('" + title + "','" + button + "');";
                window.setTimeout(initFormRequest, 600);
                //显示面板
                window.setTimeout("login.loginPanelShow = true;", 500);
            },

            /** 初始化表单内容 */
            initForm(title, button) {
                //隐藏/显示注册相关选项
                this.registerFlag = !this.registerFlag;
                //更换标题
                this.formTitle = title;
                //更换按钮名称
                this.formButton = button;
                //初始化表单
                this.$refs["loginForm"].resetFields();
            },

            /** 按钮状态设置为加载 */
            loadButton() {
                $("#submitButton").attr("disabled", "disabled");
                $("#submitButton").addClass("is-disabled");
                $("#submitButton").append("<i id='loadIcon' class='el-icon-loading'></i>");
            },

            /** 恢复按钮默认状态 */
            noLoadButton() {
                $("#submitButton").removeAttr("disabled");
                $("#submitButton").removeClass("is-disabled");
                $("#loadIcon").remove();
            }
        }
    });

    $(function () {
        //显示界面
        window.setTimeout("login.screenShow = true;", 400);
        //获取验证码
        login.getAuthCode();
    });
</script>
</html>
